<template>
<div>
  <h1>图书展示</h1>
  <table border="1" cellspacing="0" align="center">
    <tr>
      <td>名称</td>
      <td>价格</td>
    </tr>
    <tr v-for="i in booklist">
      <td>{{i.name}}</td>
      <td>{{i.price}}</td>
    </tr>
    <tr>
      <td v-for=" i in tpages">
        <button @click="get_booklist(i)">{{i}}</button>
      </td>
    </tr>
  </table>

  <p>
    请输入搜索内容:<input type="text" v-model="name">
    <br>
  </p>
  <button @click="search">搜索</button>{{books}}
</div>
</template>

<script>
export default {
  name: "book_1",
  data(){
    return{
      booklist:[],
      tpages:[],
      name:[],
      books:[]
    }
  },
  methods:{
    get_booklist(cpage){
      this.axios.get('users/book/?cpage='+cpage)
      .then(res=>{
        console.log(res.data)
        this.booklist=res.data.booklist
        this.tpages=res.data.tpages
      })
    },
    search(){
      this.axios.get('users/books/?name='+this.name)
      .then(res=>{
        if(res.data.code==200){
          this.books=res.data.list
        }
      })
    },
  },
  mounted() {
    this.get_booklist(1)
    this.search()
  }
}
</script>

<style scoped>

</style>
